import React, { PropTypes } from 'react'
import { connect } from 'dva'
import {TabBar,Button,NavBar,Icon,Tabs} from 'antd-mobile'
const TabPane = Tabs.TabPane

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import List from '../components/List'
import BlogItemView from '../components/BlogItemView'
import BlogDetail from '../components/BlogDetail'

function IndexPage({history, location, dispatch, index, blog, essence}) {

    const {selectedTab, title} = index

    const changeTab = (selectedTab, title) =>{
        console.log('dispatch changeTab')

        dispatch({
            type: 'index/changeTab',
            payload:{
                selectedTab,
                title
            }
        })
    }

    const tabPaneChange = (key)=>{
        console.log(key)

        dispatch({
            type: 'index/showTab',
            payload: key
        })
    }

    let endReachedFlag = true

    const blogProps = {
        ...blog,
        onRefresh: ()=>{
            dispatch({
                type: 'blog/refresh'
            })
        },
        onEndReached: ()=>{

            if(!blog.loading){
                dispatch({
                    type: 'blog/query'
                })
            }
        },
        row: (rowData)=>{
            return (
                <BlogItemView data={rowData} detail={()=>{dispatch({type: 'index/openDetail', payload:{currentDetail: rowData}})}} />
            )
        },
    }

    const essenceProps = {
        ...essence,
        onRefresh: ()=>{
            dispatch({
                type: 'essence/refresh'
            })
        },
        onEndReached: ()=>{

            if(!essence.loading){
                dispatch({
                    type: 'essence/query'
                })
            }
        },
        row: (rowData)=>{
            return (
                <BlogItemView data={rowData} />
            )
        }
    }

    const detailProps = {
        ...index,
        close: ()=>{
            dispatch({
                type: 'index/closeDetail'
            })
        },
        load: (id)=>{
            dispatch({
                type: 'index/loaddetail',
                payload:{
                    id
                }
            })
        }
    }

    return (
        <div>
            <NavBar iconName={false}
                rightContent={<Icon key="0" type="search" />}
            >{title}</NavBar>
            <div>

                <TabBar >
                    <TabBar.Item 
                        title="博客"
                        key="博客"
                        icon={require('../assets/image/icon-blog.png')}
                        selectedIcon={require('../assets/image/icon-blog-selected.png')}
                        selected={selectedTab=='blogTab'}
                        onPress={()=>{changeTab('blogTab', '博客')}}
                    >

                        <Tabs swipeable={false} onChange={tabPaneChange}>
                            <TabPane tab="首页" key="blog">
                                {
                                    index.blog && <List {...blogProps}  />
                                }
                            </TabPane>
                            <TabPane tab="推荐" key="essence">
                                {
                                    index.essence && <List {...essenceProps} />
                                }
                            </TabPane>
                        </Tabs>
                        
                    </TabBar.Item>

                    <TabBar.Item
                        title="新闻"
                        key="新闻"
                        icon={require('../assets/image/icon-news.png')}
                        selectedIcon={require('../assets/image/icon-news-selected.png')}
                        selected={selectedTab=='newsTab'}
                        onPress={()=>{changeTab('newsTab', '新闻')}}
                    >
                        
                    </TabBar.Item>
                </TabBar>
            </div>

            <ReactCSSTransitionGroup
                transitionName="detail"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
            >
                {index.detail && 
                    <BlogDetail {...detailProps} key={index.currentDetail.id}/>
                }
            </ReactCSSTransitionGroup>
        </div>
    )
}

IndexPage.propTypes = {
}

function mapStateToProps({index, blog, essence}) {
    return {index, blog, essence}
}

export default connect(mapStateToProps)(IndexPage)
